<template>
  <el-switch v-model="is_used" :disabled="isDisabled" :active-value="1" :inactive-value="0" @change="changeStatus" />
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      default: _ => {
        return {};
      }
    }
  },
  inject: ['reload'],
  data() {
    return {
      disabled: false,
      is_used: this.row.is_used
    };
  },
  computed: {
    isDisabled() {
      // 是否禁止编辑状态
      if (this.disabled) {
        return true;
      }
      // 无权限时不可点击
      return !this.hasPermission({
        permission: 'content.sensitive.edit'
      });
    }
  },
  methods: {
    changeStatus: function (value) {
      this.$box
          .confirm('确定使用当前模板吗？')
          .then(() => {
            this.disabled = true;
            this.$http.put(
                '/admin/site/template/' + this.row.id + '/edit/is_used',
                { is_used: value },
                response => {
                  this.disabled = false;
                  this.reload()
                },
                error => {
                  this.$message.error(error.msg);
                  this.disabled = false;
                  this.is_used = value == 1 ? 0 : 1;
                },
                false
            );
          })
          .catch(_ => {
            this.is_used = value == 1 ? 0 : 1;
          })
    }
  }
};
</script>

<style></style>
